<template lang='pug'>
  section
    van-nav-bar(
      title="我的收货地址"
      right-text="添加新地址"
      left-arrow
      @click-left="$router.back()"
      )
      
    van-address-list(
      v-model="chosenAddressId"
      :list="addressList"
      :switchable="false"
      @add="onAdd"
      @edit="onEdit")
</template>

<script type='text/ecmascript-6'>
  export default {
    components: {

    },
    data() {
      return {
        chosenAddressId: '1',
        list: [
          {
            id: '1',
            name: '张三',
            tel: '13000000000',
            address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
          },
          {
            id: '2',
            name: '李四',
            tel: '1310000000',
            address: '浙江省杭州市拱墅区莫干山路 50 号'
          }
        ],
        addresss: []
      }
    },
    computed: {
      user() { return this.$store.state.authUser || {} },
      userId() {
        if (!this.user ||!this.user.user) return ''
        return this.user.user.id
      },
      addressList() {
        return this.addresss.map(address => {
          const { id, receiverName: name, receiverMobileNo: tel, provinceName, cityName, districtName, detailAddress } = address

          return {
            id,
            name,
            tel,
            address: provinceName + cityName + districtName + detailAddress
          }
        })
      },
    },
    created() {
      this.getAddress()
    },
    methods: {
      async getAddress() {
        const resp = await this.$post('/api/platform/shipping/shippingPage', {userId: this.userId})
        this.addresss = resp.data || []
      },
      onAdd() {
        Toast('新增地址');
      },

      onEdit(item, index) {
        Toast('编辑地址:' + index);
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
 
</style>
